﻿<DemoPageSectionComponent Id="DataGrid-Templates-Column" ShowHorizontalScrollBar="true">
    @inject NwindDataService NwindDataService

    @if(DataSource == null) {
        <p><em>Loading...</em></p>
    } else {
        <DxDataGrid Data="@DataSource"
                    RowRemovingAsync="@OnRowRemovingAsync"
                    RowUpdatingAsync="@OnRowUpdatingAsync"
                    RowInsertingAsync="@OnRowInsertingAsync"
                    RowEditStart="@(dataItem => OnRowEditStarting(dataItem))"
                    RowInsertStart="@(() => OnRowEditStarting(null))">
            <Columns>
                <DxDataGridCommandColumn Width="120px" />
                <DxDataGridColumn Field="@nameof(Employee.FirstName)" />
                <DxDataGridColumn Field="@nameof(Employee.LastName)" />
                <DxDataGridColumn Field="@nameof(Employee.Title)" />
                <DxDataGridColumn Field="@nameof(Employee.TitleOfCourtesy)" Width="150px" />
                <DxDataGridDateEditColumn Field="@nameof(Employee.BirthDate)" Width="150px" />
                <DxDataGridDateEditColumn Field="@nameof(Employee.HireDate)" Width="150px" />
                <DxDataGridColumn Field="Details" AllowSort="false" Width="90px" TextAlignment="DataGridTextAlign.Center">
                    <DisplayTemplate><button class="btn btn-link grid-btn-link" @onclick="() => ShowDetails((EditableEmployee)context)">More Info</button></DisplayTemplate>
                    <EditTemplate>
                        <DxMemo @bind-Text="@EditEmployeeNotes" Rows="5" />
                        <div class="demo-text mt-1">Details should be 4 to 256 characters</div>
                    </EditTemplate>
                </DxDataGridColumn>
            </Columns>
        </DxDataGrid>
        <DxPopup @bind-Visible="@PopupVisible"
                 HeaderText="@PopupHeaderText"
                 HorizontalAlignment="HorizontalAlignment.Center"
                 VerticalAlignment="VerticalAlignment.Center">@PopupContent</DxPopup>
    }

    @code {
        IEnumerable<EditableEmployee> DataSource { get; set; }
        string EditEmployeeNotes { get; set; }
        EditableEmployee CurrentEmployee { get; set; }

        bool PopupVisible {
            get { return CurrentEmployee != null; }
            set { if(!value) CurrentEmployee = null; }
        }
        string PopupHeaderText {
            get { return CurrentEmployee != null ? CurrentEmployee.FirstName + " " + CurrentEmployee.LastName : ""; }
        }
        string PopupContent {
            get { return CurrentEmployee != null ? CurrentEmployee.Notes : ""; }
        }

        protected override async Task OnInitializedAsync() {
            DataSource = await NwindDataService.GetEmployeesEditableAsync();
        }
        public void ShowDetails(EditableEmployee context) {
            CurrentEmployee = context;
        }

        void OnRowEditStarting(EditableEmployee employee) {
            EditEmployeeNotes = employee?.Notes;
        }
        async Task OnRowRemovingAsync(EditableEmployee dataItem) {
            await NwindDataService.RemoveEmployeeAsync(dataItem);
            DataSource = await NwindDataService.GetEmployeesEditableAsync();
            StateHasChanged();
        }
        async Task OnRowUpdatingAsync(EditableEmployee dataItem, IDictionary<string, object> newValues) {
            newValues.Add(nameof(Employee.Notes), EditEmployeeNotes);
            await NwindDataService.UpdateEmployeeAsync(dataItem, newValues);
            DataSource = await NwindDataService.GetEmployeesEditableAsync();
            StateHasChanged();
        }
        async Task OnRowInsertingAsync(IDictionary<string, object> newValues) {
            newValues.Add(nameof(Employee.Notes), EditEmployeeNotes);
            await NwindDataService.InsertEmployeeAsync(newValues);
            DataSource = await NwindDataService.GetEmployeesEditableAsync();
            StateHasChanged();
        }
    }
</DemoPageSectionComponent>
